<template>
    <div class="page">
      <div class="panel">
        <div class="left">
          <img src="../../assets/login/logo.png" class="logo">
          <img src="../../assets/login/big.png" class="big">
        </div>
        <div class="right">
          <div class="title-container">
            <h2>
              神州大健康体检系统
            </h2>
            <span>V1.0</span>
          </div>
          <div v-if="!qr.qrCodeVisible">
            <div class="row">
              <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="user" size="large" clearable/>
            </div>
            <div class="row">
              <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="Lock" size="large" clearable/>
            </div>
            <div class="row">
              <el-button type="primary" class="btn" size="large" @click="login()">
                登录系统
              </el-button>  
            </div>
            <div class="row">
              <a href="#" class="link">二维码登录</a>
            </div>
          </div>
          <div v-if="qr.qrCodeVisible">
            <div class="qrCode-container">
              <img :src="qr.qrCode" height="153" class="qrCode">
              <img src="../../assets/login/phone.png" height="148">
            </div>
            <div class="row">
              <a href="#" class="link">用户名密码登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
  import { isUsername, isPassword } from '../../utils/validate';
  import { getCurrentInstance, ref, reactive } from 'vue'
  import router from '../../router/index';

  const { proxy } = getCurrentInstance();
  const loginForm = reactive({
    username: null,
    password: null
  });
  const qr = reactive({
    qrCodeVisible: false,
    qrCode: '',
    uuid: null,
    qrCodeTimer: null,
    loginTimer: null
  });
  function login() {
    if(!isUsername(loginForm.username)) {
      proxy.$message({
        message: '用户名不正确',
        type: 'error',
        duration: 1200
      });
    } else if(!isPassword(loginForm.password)) {
      proxy.$message({
        message: '密码不正确',
        type: 'error',
        duration: 1200
      });
    } else {
      const data = {
        username: loginForm.username,
        password: loginForm.password
      };
      proxy.$http('/mis/user/login', 'POST', data, true, resp => {
        if(resp.result) {
          const permissions = resp.permissions;
          const token = resp.token;
          // 保存令牌和权限列表
          localStorage.setItem('permissions', permissions);
          localStorage.setItem('token', token);
          // 跳转页面
          router.push({
            name: 'MisHome'
          });
        } else {
          proxy.$message({
            message: '登陆失败',
            type: 'error',
            duration: 1200
          })
        }
      })
    }
  }
</script>

<style scoped lang="less">
  @import url('login.less');
</style>